<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ECharts Bar Chart Example with Reversed X-Axis</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
    <style>
        #main {
            width: 600px;
            height: 400px;
        }
    </style>
</head>
<body>
<div id="main"></div>

<script>
    $(document).ready(function() {
        // 初始化ECharts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 使用jQuery的$.getJSON方法加载JSON数据
        $.getJSON('../word/airline.json', function(data) {
            // 转换数据为ECharts需要的格式
            var categories = data.map(function(item) {
                return item.airline;
            });
            var values = data.map(function(item) {
                return parseInt(item.num);
            });

            // 设置ECharts的选项
            var option = {
                xAxis: {
                    type: 'category',
                    data: categories,
                    inverse: true, // 反转X轴
                    axisLabel: {
                        rotate: 90,
                        interval: 0 // 如果需要显示所有标签，设置interval为0
                    },
                    axisTick: {
                        alignWithLabel: true // 刻度线对齐到标签
                    }
                },
                yAxis: {
                    type: 'value'

                },
                series: [{
                    data: values,
                    type: 'bar'
                }]
            };

            // 使用配置项和数据显示图表
            myChart.setOption(option);
        }).fail(function(jqXHR, textStatus, errorThrown) {
            console.error('Error fetching data:', textStatus, errorThrown);
        });
    });
</script>
</body>
</html>